<template>
	<div class="contant">
		<div class="content">
			<div class="topbox">
				<div class="title">{{ $t("资产") }}</div>
				<div class="total">{{ total }}<span>USD</span></div>
				<div class="shouyi">
					<div class="oneshouyi">
						<span>{{ $t("可用余额") }}</span>
						<div class="shouyinum">{{ use }}</div>
					</div>
					<div class="oneshouyi" style="width: 50%;">
						<span>{{ $t("今日收益") }}</span>
						<div class="shouyinum">{{ today_shouyi }}</div>
					</div>

					<div class="oneshouyi" style="width: 50%;">
						<span>{{ $t("总收益") }}</span>
						<div class="shouyinum">{{ total_shouyi }}</div>
					</div>
				</div>
			</div>
			<div class="caozuo">
				<div class="onecaozuo" @click="go('recharge')">
					<img src="../../assets/images/zichan/chongzhi.png" alt="" />
					<span>{{ $t("充值") }}</span>
				</div>
				<div class="onecaozuo" @click="go('withdrawal')">
					<img src="../../assets/images/zichan/tixian.png" alt="" />
					<span>{{ $t("提现") }}</span>
				</div>
				<div class="onecaozuo" @click="go('transfer')">
					<img src="../../assets/images/zichan/duihuan.png" alt="" />
					<span>{{ $t("兑换") }}</span>
				</div>
			</div>
			<van-tabs v-model="active" color="#588bf7" title-active-color="#588bf7">
				<van-tab :title="$t('账户资产')" :title-style="{ fontWeight: 'bold' }">
					<div class="list">
						<div class="oneitem" v-for="(item, index) in zichanlist" :key="index">
							<div class="zichanname">{{ item.EN_name }}</div>
							<div class="details">
								<div class="canuse">
									<span>{{ $t("可用") }}({{ item.EN_name }})</span>
									<div class="zcnum">{{ item.money }}</div>
								</div>
								<div class="canuse">
									<span>{{ $t("处理中") }}({{ item.EN_name }})</span>
									<div class="zcnum">{{ item.moneyd }}</div>
								</div>
								<div class="canuse">
									<span>{{ $t("折合") }}(USD)</span>
									<div class="zcnum">{{ item.foldMeny }}</div>
								</div>
							</div>
						</div>
					</div>
				</van-tab>
				<!--  <van-tab :title="$t('币币资产')">
          <div class="list">
            <div class="oneitem" v-for="(item, index) in bibilist" :key="index">
              <div class="zichanname">{{ item.EN_name }}</div>
              <div class="details">
                <div class="canuse">
                  <span>{{ $t("可用") }})</span>
                  <div class="zcnum">{{ item.bibi_money }}</div>
                </div>
                <div class="canuse">
                  <span>{{ $t("处理中") }}</span>
                  <div class="zcnum">{{ item.moneyd }}</div>
                </div>
                <div class="canuse">
                  <span>{{ $t("折合") }}(USDT)</span>
                  <div class="zcnum">{{ item.zhehe }}</div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>-->
			</van-tabs>
		</div>
		<tabBar :active="4"></tabBar>
	</div>
</template>

<script>
	import tabBar from "@/components/tabBar.vue";
	export default {
		name: "assets",
		components: {
			tabBar
		},
		data() {
			return {
				active: 0,
				zichanlist: [],
				bibilist: [],
				total: "", // 总资金
				today_shouyi: "", // 当天总收益
				total_shouyi: "", // 累计总收益 
				use: 0, //可用余额
				mining_money: 0, // 锁仓余额
				chlid: 0, // 下级人数
				chlid_today_mining_money: 0, //下级产生的当天锁仓收益
				chlid_total_mining_money: 0, // 下级产生的累计锁仓收益
				jmoney: 0, // 快速交易
			};
		},
		created() {},
		mounted() {
			this.getzichanlist();
			this.getbibilist();
		},

		methods: {
			go(name) {
				if (name == "recharge") {
					this.$router.push({
						name: "recharge",
					});
				}
				if (name == "withdrawal") {
					this.$router.push({
						name: "withdrawal",
					});
				}
				if (name == "transfer") {
					this.$router.push({
						name: "transfer",
					});
				}
			},
			//资产账户
			getzichanlist() {
				$postAxios(api.getAssets, {}, (res) => {
					this.zichanlist = res.data;
					this.total = res.total;
					this.today_shouyi = res.today_shouyi;
					this.total_shouyi = res.total_shouyi;
					this.use = res.use;
					this.mining_money = res.mining_money;
					this.chlid = res.chlid
					this.chlid_today_mining_money = res.chlid_today_mining_money
					this.chlid_total_mining_money = res.chlid_total_mining_money
					this.jmoney = res.jmoney;
				});
			},
			//币币资产
			getbibilist() {
				$postAxios(api.bibilist, {}, (res) => {
					this.bibilist = res.data;
					// this.total = res.total;
					// this.today_shouyi = res.today_shouyi;
					// this.total_shouyi = res.total_shouyi;
				});
			},
			//获取用户信息
		},
	};
</script>

<style lang="scss" scoped>
	.contant {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background-color: rgba(247, 246, 251, 1);

		.content {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 54px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.topbox {
			width: 100%;
			// height: 170px;
			box-sizing: border-box;
			padding: 15px 0;
			background: url("../../assets/images/zichan/topbg.png") no-repeat;
			background-size: 100% 100%;

			.title {
				text-align: center;
				font-size: 14px;
				color: #ffffff;
			}

			.total {
				text-align: center;
				font-size: 14px;
				font-weight: bold;
				color: #ffffff;
				margin-bottom: 25px;
				word-break: break-all;

				span {
					font-size: 20px;
					font-weight: bold;
					color: #ffffff;
					padding-left: 4px;
				}
			}

			.shouyi {
				width: 100%;
				display: flex;
				align-content: center;

				.oneshouyi {
					width: 33%;
					display: flex;
					flex-direction: column;
					align-items: center;

					span {
						font-size: 12px;
						color: #ffffff;
					}

					.shouyinum {
						font-size: 14px;
						color: #ffffff;
						font-weight: bold;
					}
				}
			}
		}

		.caozuo {
			width: 92%;
			margin: 12px auto;
			background-color: #ffffff;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);

			.onecaozuo {
				width: 33.3%;
				padding: 20px 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				img {
					width: 44px;
					height: 42px;
				}

				span {
					font-size: 14px;
					color: #333333;
					font-weight: bold;
					padding-top: 3px;
				}
			}
		}

		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 20px 0 60px;

			.oneitem {
				width: 92%;
				margin: 0 auto;
				border-radius: 10px;
				background-color: #ffffff;
				margin-bottom: 10px;
				box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);

				.zichanname {
					font-size: 18px;
					color: #3489f8;
					font-weight: bold;
					padding: 12px 10px;
				}

				.details {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 13px;

					.canuse {
						width: 33.3%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						span {
							font-size: 12px;
							color: #333333;
						}

						.zcnum {
							font-size: 12px;
							color: #333333;
							font-weight: bold;
							padding-top: 10px;
						}
					}
				}
			}
		}
	}
</style>
